import AgentServer from '@/modules/Agent';
import { resizeWin } from '@/utils/resize';
import styled from '@emotion/styled';
import React from 'react';
import { Draggable, DraggableProvided, DraggableStateSnapshot, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd';
import { useSelector } from 'react-redux';
import ToolItem from './ToolItem';

interface IListProps {
	list: any[];
	listType?: string;
	internalScroll?: boolean;
	isCombineEnabled?: boolean;
	activeIdx: number;
}

const ScrollContainer = styled.div`
	overflow: auto;
`;

const Container = styled.div`
	padding-right: ${(props: any) => (props.isDraggingOver ? '68px' : '0')}; // 开始拖拽，新增一个图标宽度
	/* flex child */
	max-width: ${(props: any) => (props.mode === 'full' ? '480px' : '740px')};
	max-height: 88px;
	overflow-x: auto;
	overflow-y: hidden;
	flex-grow: 1;

	/*
    flex parent
    needed to allow width to grow greater than body
  */
	display: inline-flex;
`;

const ToolContainer = styled.div`
	opacity: ${(props: { isDraggingOver: boolean }) => (props.isDraggingOver ? 0.5 : 1)};
`;

const ToolList = (props: IListProps) => {
	const { list = [], internalScroll, activeIdx } = props;
	const { layout } = useSelector(state => state) as any;

	const calculatorMenuContainer = (): string => {
		return resizeWin(AgentServer.rootContainer).Width > 1199 ? `pc-menu-${AgentServer.configure.layout}-tool-contianer` : `pad-menu-${AgentServer.configure.layout}-tool-contianer`
	};
	return (
		<Droppable droppableId="menu-tool" direction="horizontal" isCombineEnabled={false}>
			{(dropProvided: DroppableProvided, dropSnapshot: DroppableStateSnapshot) => (
				<Container
					{...dropProvided.droppableProps}
					{...dropProvided.droppableProps}
					{...layout}
					isDraggingOver={dropSnapshot.isDraggingOver}
					ref={dropProvided.innerRef}
					className={calculatorMenuContainer()}
				>
					{list.map((item, index: number) => (
						<Draggable key={item.id} draggableId={item.id.toString()} index={index} isDragDisabled={list.length < 7}>
							{(dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot) => (
								<ToolContainer isDraggingOver={dropSnapshot.isDraggingOver}>
									<ToolItem {...item} provided={dragProvided} snapshot={dragSnapshot} />
									{/* {dropProvided.placeholder} */}
								</ToolContainer>
							)}
						</Draggable>
					))}
				</Container>
			)}
		</Droppable>
	);
};

export default ToolList;
